$(function () {
    //当密码有修改时应该再次触发有验证密码
    $('#password1').change(function () {
        $('#password2').focus().blur()
    })

    $('button#btn').click(function () {
        if ($('.agree label input').prop('checked') == false) {
            alert('请勾选用户协议')
            return
        }

        if ($('.info p.ok:visible').length != 3) {
            alert('请确保所有信息均填写正确,才能完成注册')
            return
        }
        const username = $('#username').val()
        const password = $('#password1').val()
        const phone = $('#phone').val()
        //网络请求的方式有很多种,最常见的是get,post
        //get适合从服务器获取数据,对应sql的查询操作
        //post 适合向服务器传递数据,对应sql的增删改操作
        //发送请求时的差别:
        //get的参数 :请求地址?参数=值$参数=值... 和请求地址一起发
        //post的三个参数:请求地址,请求参数,回调函数
        var url = 'http://localhost:3000/v1/register/user/register'
        //请求参数:有两种方式可选 -- 字符串或对象
        //字符串格式:参数=值&参数=值..
        //对象格式:{参数:值,参数:值}
        var params = {
            username,
            phone,
            password
        }
        console.log('注册参数', params)
        $.post(url, params, data => {
            if (data.code == 200) {
                alert('恭喜注册成功,即将跳转到登录页面')
                location.replace('?p=login')
            } else {
                alert('很遗憾注册失败')
            }
        })
    })
    $('#phone').blur(function () {
        const phone = $('#phone').val()
        //如果输入框没有值得话,不检测
        if (phone == '') return //return终止代码的执行
        //判断手机号格式是否正确
        if (/^1[3-9]\d{9}/.test(phone) == false) {
            //不正确:输入框加err样式&&展示手机号格式错误
            $(this).addClass('err')
            $('.info').eq(0).children().eq(0).show()
        } else {
            var url = 'http://localhost:3000/v1/register/user/query/phone'
            $.post(url, { phone }, data => {
                console.log(data)
                if (data.code == 200) {
                    $('.info').eq(0).children().eq(2).show()
                }
                if (data.code == 400) {
                    $(this).addClass('err')
                    $('.info').eq(0).children().eq(1).show()
                }
            })
        }
    }).focus(function () {
        $(this).removeClass('err')
        $('.info').eq(0).children().hide()
    })
    $('#password1').blur(function () {
        const pwd = $('#password1').val()
        //如果输入框没有值得话,不检测
        if (pwd == '') return //return终止代码的执行
        if (/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/.test(pwd) == false) {
            $(this).addClass('err')
            $('.info').eq(2).children().eq(0).show()
        } else {
            $('.info').eq(2).children().eq(1).show()
        }
    }).focus(function () {
        $(this).removeClass('err')
        $('.info').eq(2).children().hide()
    })
    $('#password2').blur(function () {
        const pwd1 = $('#password1').val()
        const pwd2 = $('#password2').val()
        if (pwd2 == '') return
        if (pwd1 == pwd2) {

            $('.info').eq(3).children().eq(1).show()
        } else {
            $(this).addClass('err')
            $('.info').eq(3).children().eq(0).show()
        }
    }).focus(function () {
        $(this).removeClass('err')
        $('.info').eq(3).children().hide()
    })
})